<script setup lang="ts">
import { useDarkMode, useToggleDarkMode } from "@/hooks/useToggleDarkMode";
import { ref } from "vue";
import { setLocale } from "@/locales";
import { useRouter } from "vue-router"; // 引入 useRouter

const router = useRouter(); // 获取路由实例

const onClickDarkMode = () => {
  useToggleDarkMode();
};

const showPopover = ref(false);
const langOptions = [
  { text: "简体中文", key: "zh-cn" },
  { text: "English", key: "en" }
];
const onSelectLang = (action: { key: 'zh-cn' | 'en' }) => {
  setLocale(action.key);
};


const goBack = () => {
  // 获取当前路由信息
  const currentRoute = router.currentRoute.value;

  // 判断当前页面是否为 Home 页面
  if (currentRoute.name === 'Home') {
    // 如果当前页面是 Home，跳转到 Home 页面
    router.push({ name: 'Home' });
  } else {
    // 否则，使用 go(-1) 返回上一个页面
    router.go(-1);
  }
};

</script>

<template>
  <van-nav-bar fixed placeholder>
    <template #left>
<!--      <van-button @click="goBack" icon="arrow-left" size="small">返回</van-button> &lt;!&ndash; 添加返回按钮 &ndash;&gt;-->
      <van-button plain hairline type="primary" size="small" icon="arrow-left" @click="goBack">返回</van-button> <!-- 添加返回按钮 -->
    </template>

    <template #right>
      <van-popover
        v-model:show="showPopover"
        :actions="langOptions"
        @select="onSelectLang"
        placement="bottom-end"
      >
        <template #reference>
          <svg-icon class="text-[18px] mr-[12px]" name="lang" />
        </template>
      </van-popover>

      <svg-icon
        class="text-[18px]"
        :name="useDarkMode() ? 'light' : 'dark'"
        @click="onClickDarkMode"
      />
    </template>
  </van-nav-bar>
</template>

<style scoped></style>
